// 导入必要的导航和组件库
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeSreen from '../pages/HomeSreen/HomeSreen';
import CategorySreen from '../pages/CategorySreen/CategorySreen';
import StudySreen from '../pages/StudySreen/StudySreen';
import MySreen from '../pages/MySreen/MySreen';
import { Image, StyleSheet, Platform } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

// 创建底部标签导航器实例
const Tab = createBottomTabNavigator();

// 定义底部导航栏图标资源对象
/**
 * 定义一个图片资源对象，用于存储底部导航栏所需的图标
 * 使用索引签名[key: string]: any 来允许任意字符串键和任意值类型
 */
const image: { [key: string]: any } = {
  home: require('../static/tabbar/home.png'), // 首页图标
  category: require('../static/tabbar/category.png'), // 分类图标
  study: require('../static/tabbar/study.png'), // 学习图标
  my: require('../static/tabbar/my.png'), // 我的图标
};

const MyIcon = (focused: boolean, color: string, icon: string) => {
  return (
    <Image
      style={[
        styles.icon,
        {
          tintColor: focused ? color : '#999999',
        },
      ]}
      source={image[icon]}
    />
  );
};

const tabbarData = [
  { id: 1, title: '首页', icon: 'home', component: HomeSreen },
  { id: 2, title: '分类', icon: 'category', component: CategorySreen },
  { id: 3, title: '学习', icon: 'study', component: StudySreen },
  { id: 4, title: '我的', icon: 'my', component: MySreen },
];

export function MyTabbar() {
  return (
    <SafeAreaView style={{ flex: 1 }} edges={['top', 'right', 'left']}>
      <Tab.Navigator 
        screenOptions={{
          headerShown: false,
          // 配置底部导航栏不覆盖安全区域
          tabBarStyle: {
            paddingBottom: Platform.OS === 'ios' ? 20 : 0,
          },
          // 配置安全区域内边距
          safeAreaInsets: {
            bottom: 0,
          }
        }}
      >
        {tabbarData.map(item => {
          return (
            <Tab.Screen
              options={{
                tabBarIcon: ({ focused, color }) => {
                  return MyIcon(focused, color, item.icon);
                },
              }}
              name={item.title}
              component={item.component}
            />
          );
        })}
      </Tab.Navigator>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});
